<template>
  <div>
    <v-header></v-header>
    <div class="line"></div>
    <!--导航栏-->
    <v-menu></v-menu>
    <div class="musicBody">
      <div style="margin-top:40px">
        <el-tabs type="border-card"
                 :tab-position="tabPosition"
                 style="box-shadow: 0 0px 0px #ccc;"
                 @tab-click="getMusicSheet">
          <el-tab-pane label="推荐"   name="1">
            <!--tab页全部内容-->
            <div style="width: 100%;" v-for="(item,index) in musicSheetList" :key="index">
              <!--一行内容-->
              <div>
                <!--图片显示-->
                <div style="display: inline-block;">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="item.imgUrl"
                    fit="fill"></el-image>
                </div>
                <!--信息显示区域-->
                <div style="margin-left: 10px;display: inline-block;vertical-align: top;">
                  <div style="display: inline-block;float: left;width: 500px" v-text="item.specialName">1234356</div>
                  <em style="">作者:{{item.userName}}</em>
                  <div style="margin-top: 10px;
                  font-size: 10px;color: #999999;
                  width: 650px;overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;" v-text="item.intro"></div>
                  <div style="margin-top: 20px">
                    <el-button type="primary" icon="iconfont icon-sousuo" size="mini">&nbsp查看歌单</el-button>
                    <el-button type="primary" icon="iconfont icon-xin" size="mini">&nbsp收藏歌单</el-button>
                  </div>
                </div>
                <el-divider border-style="margin:12px"></el-divider>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="最新更新" :key="index" name="2">
            <!--tab页全部内容-->
            <div style="width: 100%;" v-for="(item,index) in musicSheetList" :key="index">
              <!--一行内容-->
              <div>
                <!--图片显示-->
                <div style="display: inline-block;">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="item.imgUrl"
                    fit="fill"></el-image>
                </div>
                <!--信息显示区域-->
                <div style="margin-left: 10px;display: inline-block;vertical-align: top;">
                  <div style="display: inline-block;float: left;width: 500px" v-text="item.specialName">1234356</div>
                  <em style="">作者:{{item.userName}}</em>
                  <div style="margin-top: 10px;
                  font-size: 10px;color: #999999;
                  width: 650px;overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;" v-text="item.intro"></div>
                  <div style="margin-top: 20px">
                    <el-button type="primary" icon="iconfont icon-sousuo" size="mini">&nbsp查看歌单</el-button>
                    <el-button type="primary" icon="iconfont icon-xin" size="mini">&nbsp收藏歌单</el-button>
                  </div>
                </div>
                <el-divider border-style="margin:12px"></el-divider>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="播放最多" :key="index" name="3">
            <!--tab页全部内容-->
            <div style="width: 100%;" v-for="(item,index) in musicSheetList" :key="index">
              <!--一行内容-->
              <div>
                <!--图片显示-->
                <div style="display: inline-block;">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="item.imgUrl"
                    fit="fill"></el-image>
                </div>
                <!--信息显示区域-->
                <div style="margin-left: 10px;display: inline-block;vertical-align: top;">
                  <div style="display: inline-block;float: left;width: 500px" v-text="item.specialName">1234356</div>
                  <em style="">作者:{{item.userName}}</em>
                  <div style="margin-top: 10px;
                  font-size: 10px;color: #999999;
                  width: 650px;overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;" v-text="item.intro"></div>
                  <div style="margin-top: 20px">
                    <el-button type="primary" icon="iconfont icon-sousuo" size="mini">&nbsp查看歌单</el-button>
                    <el-button type="primary" icon="iconfont icon-xin" size="mini">&nbsp收藏歌单</el-button>
                  </div>
                </div>
                <el-divider border-style="margin:12px"></el-divider>
              </div>
            </div>
          </el-tab-pane>

        </el-tabs>
      </div>
    </div>

  </div>
</template>

<script>
  import header from '../layout/Header.vue'
  import footer from '../layout/Footer.vue'
  import menu from '../layout/Menu.vue'


  export default {
    components: {
      'v-header': header,
      'v-footer': footer,
      'v-menu' : menu
    },
    name: 'MusicSheet',
    data () {
      return {
        tabPosition: 'left',
        musicSheetList: [],
      }
    },
    methods: {
      getMusicSheet (tab, event) {
        this.$axios({
          method: 'get',
          url: '/kugou/musicSheet/' + tab.name,
          dataType: 'json',
        }).then(res => {
          console.log(res.data.data.info)
          this.musicSheetList=res.data.data.info
        })
      },
    },
    mounted () {

    }
  }
</script>

<style>
  .musicBody {
    width: 1000px;
    margin: 0 auto;
  }
</style>
